@inject IAuthorizationService Auth
@inject ManagerLocalizer Localizer

<!-- The Modal -->
<div class="modal modal-panel fade" id="mediapicker">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-images"></i> @Localizer.Media["Select media"]</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <!-- Modal Body -->
            <div class="modal-body bg-light">
                <!-- Pills -->
                <div class="row">
                    <div class="col">
                        <ul class="nav nav-pills mb-3">
                            <li class="nav-item">
                                <a class="nav-link" :class="{active: listView}" v-on:click.prevent="toggle" href="#"><i class="fas fa-list"></i></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" :class="{active: !listView}" v-on:click.prevent="toggle" href="#"><i class="fas fa-table"></i></a>
                            </li>
                        </ul>
                    </div>
                    <div class="col">
                        <div class="d-flex flex-row">
                            @if ((await Auth.AuthorizeAsync(User, Permission.MediaAddFolder)).Succeeded)
                            {
                            <input v-model="folderName" v-on:keyup.enter="savefolder" type="text" placeholder="@Localizer.Media["Add folder"]" class="form-control flex-fill">
                            <button v-on:click.prevent="savefolder" class="btn btn-primary ml-3"><i class="fas fa-plus"></i></button>
                            }
                        </div>
                    </div>
                </div>

                @if ((await Auth.AuthorizeAsync(User, Permission.MediaAdd)).Succeeded)
                {
                    <div id="mediapicker-upload-container" class="dropzone-container">
                        <form action="@Url.Action("Upload", "MediaApi")" class="dropzone needsclick dz-clickable" enctype="multipart/form-data">
                            <input type="hidden" name="Model.ParentId" v-model="currentFolderId" />
                            <div class="dz-message needsclick text-center">
                                <span class="fas fa-cloud-upload-alt"></span>
                                @Localizer.Media["Drop files here or click to upload."]
                            </div>
                            <div class="file-list"></div>
                        </form>
                        <ul class="media-list list-unstyled"></ul>
                    </div>
                }

                <div class="form-group mt-3">
                     <input id="mediapickerSearch" class="form-control" v-model="search" v-on:keyup.enter="onEnter" placeholder="@Localizer.General["Search..."]"/>
                </div>

                <div v-if="currentFolderBreadcrumb != null" class="breadcrumb">
                    <span class="folder"><a href="#" v-on:click.prevent="load()"><i class="fas fa-folder-open"></i>@Localizer.Media["Media"]</a></span>
                    <span v-for="folder in currentFolderBreadcrumb" class="folder"><a href="#" v-on:click.prevent="load(folder.id)"><i class="fas fa-folder-open"></i>{{ folder.name }}</a></span>

                </div>

                <template v-if="listView">
                    <table class="table table-borderless table-media">
                        <thead>
                            <tr>
                                <th>@Localizer.General["Name"]</th>
                                <th class="td-medium d-none">@Localizer.General["Type"]</th>
                                <th class="td-small d-none">@Localizer.General["Size"]</th>
                                <th class="td-small">@Localizer.General["Modified"]</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-if="currentFolderId != null">
                                <td><a href="#" v-on:click.prevent="load(parentFolderId)"><i class="fas fa-folder-open"></i>...</a></td>
                                <td class="d-none"></td>
                                <td class="d-none"></td>
                                <td></td>
                            </tr>
                            <tr v-for="folder in filteredFolders">
                                <td><a href="#" v-on:click.prevent="load(folder.id)"><i class="fas fa-folder-open"></i>{{ folder.name }}</a></td>
                                <td class="d-none"></td>
                                <td class="d-none"></td>
                                <td></td>
                            </tr>
                            <tr v-for="item in filteredItems">
                                <td>
                                    <a href="#" v-on:click.prevent="select(item)">
                                        <i v-if="item.type === 'Audio'" class="fas fa-volume-up"></i>
                                        <i v-if="item.type === 'Document'" class="fas fa-file-alt"></i>
                                        <i v-if="item.type === 'Image'" class="fas fa-image"></i>
                                        <i v-if="item.type === 'Video'" class="fas fa-video"></i>
                                        <i v-if="item.type === 'Resource'" class="fas fa-box-open"></i>
                                        {{ item.filename }}
                                    </a>
                                </td>
                                <td class="d-none">{{ item.contentType }}</td>
                                <td class="d-none">{{ item.size }}</td>
                                <td>{{ item.lastModified }}</td>
                            </tr>
                        </tbody>
                    </table>
                </template>

                <template v-if="!listView">
                    <div class="gallery gallery-sm">
                        <div class="gallery-header">
                            @Localizer.Media["Gallery"]
                        </div>

                        <a href="#" class="thumbnail" v-if="currentFolderId != null" v-on:click.prevent="load(parentFolderId)">
                            <img src="~/manager/assets/img/media-placeholder.png">
                            <div class="thumbnail-icon">
                                <i class="fas fa-folder-open fa-3x"></i>
                            </div>
                            <p class="thumbnail-text">...</p>
                        </a>

                        <a href="#" class="thumbnail" v-for="folder in filteredFolders" v-on:click.prevent="load(folder.id)">
                            <img src="~/manager/assets/img/media-placeholder.png">
                            <div class="thumbnail-icon">
                                <i class="fas fa-folder fa-3x"></i>
                            </div>
                            <p class="thumbnail-text">{{ folder.name }}</p>
                        </a>

                        <template v-for="item in filteredItems">
                            <a href="#" class="thumbnail" v-on:click.prevent="select(item)">

                                <template v-if="item.type === 'Image'">
                                    <img class="thumbnail-image" :src="getThumbnailUrl(item)">
                                </template>

                                <template v-else-if="item.type === 'Document'">
                                    <div class="thumbnail-icon">
                                        <i class="fas fa-file-alt fa-3x"></i>
                                    </div>
                                </template>

                                <template v-else-if="item.type === 'Video'">
                                    <div class="thumbnail-icon">
                                        <i class="fas fa-film fa-3x"></i>
                                    </div>
                                </template>

                                <template v-else-if="item.type === 'Resource'">
                                    <div class="thumbnail-icon">
                                        <i class="fas fa-box-open fa-3x"></i>
                                    </div>
                                </template>

                                <template v-else>
                                    <div class="thumbnail-icon">
                                        <i class="fas fa-file"></i>
                                        <i class="fas fa-file fa-3x"></i>
                                    </div>
                                </template>

                                <p class="thumbnail-text">{{ item.filename }}</p>
                            </a>
                        </template>
                    </div>
                </template>
            </div>
        </div>
    </div>
</div>